<template>
  <div class="desk-main">
    <l-dialog></l-dialog>
    <!--桌子排版大块-->
    <div v-for="(deskArea,index) in deskObject" class="desk-block">
      <!--桌号-->
      <div class="num-block">
        <text>{{deskArea.deskId}}</text>
      </div>
      <!--位置大块-->
      <div class="seat-block">
        <!--每桌各个位置-->
        <img v-for="(item,itemIndex) in deskArea.seatList"
        :src="!item.status ? seatImgurl:item.myIconUrl"  @click="chooseSeat(item,deskArea.deskId)" />
      </div>
    </div>
    <!--底部确认键-->
<!--    <div>-->
<!--      <button>确认报餐</button>-->
<!--    </div>-->
  </div>
</template>

<script>
  export default{
    data() {
      return{
        seatImgurl:"/static/icon/seat3.png",
        sureSeatImgurl:"/static/icon/location1.png",
        oneDeskSeatCount:8,
        deskObject:[
            {
            deskId:1,
            seatAmount:8,
            seatList:[
              {seatId:1,status:true,myIconUrl:"/static/icon/003-man.png"},
              {seatId:2,status:true,myIconUrl:"/static/icon/016-woman.png"},
              {seatId:3,status:false,myIconUrl:""},
              {seatId:4,status:false,myIconUrl:""},
              {seatId:5,status:true,myIconUrl:"/static/icon/003-man.png"},
              {seatId:6,status:true,myIconUrl:"/static/icon/016-woman.png"},
              {seatId:7,status:false,myIconUrl:""},
              {seatId:8,status:false,myIconUrl:""}
            ]
            },
            {
              deskId:2,
              seatList:[
                {seatId:1,status:false,myIconUrl:""},
                {seatId:2,status:false,myIconUrl:""}
              ]
              },
        ],
      }
    },
    watch:{

    },
    methods:{
      chooseSeat(e,d){
        if(e.status){
        wx.lin.showDialog({
          type:"alert",
          title:"",
          content:"该位置已经有人！" ,
          success: (res) => {
            if (res.confirm) {
              console.log('用户点击确定')
            } else if (res.cancel) {
              console.log('用户点击取消')
            }
          }
        })
        }else{
          wx.lin.showDialog({
            type:"confirm",
            title:"",
            content:"确认报餐:"+d+"号桌"+e.seatId+"位" ,
            success: (res) => {
              if (res.confirm) {
                e.status=true
                e.myIconUrl="/static/icon/seat1.png"
                console.log(e)
                console.log('用户点击确定')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        }
      }
    }
  }
</script>

<style>
.desk-main{
  width: 100%;
  height: auto;
  position: relative;
}
.desk-block{
  width: 720;
  height: 300rpx;
  margin: 10rpx 15rpx;
  border-radius: 20rpx;
  box-shadow: #888888 5rpx 5rpx 5rpx;
  background-color: #79c8a6;
  border: #79c8a6 1rpx solid;
  display: flex;
}

.num-block{
  width: 100rpx;
  height: 100rpx;
  margin: 100rpx 20rpx;
  border-radius: 20rpx;
  background-color: black;
  text-align: center;
  opacity: 0.5;
}

.num-block > text {
  margin: 10rpx;
  font-size: 70rpx;
  color: #ffffff;
  opacity: 1 !important
}

.seat-block{
  width: 580rpx;
  height: 300rpx;
  justify-content: space-around;
  display: flex;
  flex-wrap: wrap;
}
.seat-block > img {
  margin-top: 10rpx;
  width: 120rpx;
  height: 120rpx;
}
</style>
